<template>
	<view class="m-loading">
		<!-- 加载中 显示loading -->
		<template v-show="!loading">
			<view class="empty" :style="[style]" v-if="pageCount<=0">
				<m-icon :wh="wh" :type="icon"></m-icon>
				<text class="hint">{{title}}</text>
			</view>
		</template>
		<!-- 只有当前页标大于总页标时并且是加载过数据时  才显示文字 -->
		<uni-load-more :status="loading?'loading':'nomore'" :showText="loadingText" :content-text="contentText" />
	</view>
</template>

<script>
	export default {
		name: "m-loading",
		data() {
			return {
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				}
			};
		},
		props: {
			pageIndex: {
				default: 0,
				type: [Number, String],
			},
			pageCount: {
				default: 0,
				type: [Number, String],
			},
			//是否是加载中
			loading: {
				type: Boolean,
				default: false
			},

			gap: {
				default: '0',
				type: String,
			},
			spa: {
				default: '100 0',
				type: String,
			},
			title: {
				type: String,
				default: '暂无数据'
			},
			wh: {
				type: String,
				default: '320 320'
			},
			icon: {
				type: String,
				default: 'empty'
			},
		},
		computed: {
			style() {
				const gap = this.gap.split(" ").filter(x => x);
				const spa = this.spa.split(" ").filter(x => x);
				return {
					padding: gap.map(n => `${n}rpx`).join(' '),
					margin: spa.map(n => `${n}rpx`).join(' '),
				}
			},
			loadingText() {
				return this.pageCount > 0 && this.pageIndex > this.pageCount
			},
		},
	}
</script>

<style lang="scss">
	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		min-height: 200rpx;
		justify-content: center;

		.hint {
			margin-top: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #888888;
		}

	}
</style>